<template>
	<view class="content-box">
		<div :class="(!start||stop)?'filterBlur':''" style="height: 100%;width:100%;">
			<game-box ref="gameContentBox" :disabled="stop||!start" :seed="diffLevel" @hasRusult="hasRusult"></game-box>
		</div>
		<div class="buttonBox" v-show="stop">
			<button class="simple-button" type="default" style="height: auto;" @click="continueFn">继续</button>
				<button class="simple-button" type="default" style="height: auto;margin-top: 40rpx;"
					@click="restartFn">重新开始</button>
		</div>
		<div class="buttonBox" v-show="!start">
			<button class="simple-button" type="default" style="height: auto;" @click="startFn">开始</button>
		</div>
		<!-- <uni-popup ref="diffPopup" type="dialog">
			<uni-popup-dialog mode="base" type="info" :before-close="true" title="选择难度" :showClose="false"
				@confirm="confirmFn">
				<van-button hairline type="primary">主要按钮</van-button>
				<van-button hairline type="default">默认按钮</van-button>
			</uni-popup-dialog>
		</uni-popup> -->
		<uni-popup ref="resultDialog" type="dialog">
			<uni-popup-dialog mode="base" type="info" :before-close="true" :title="dialogTitle" :showClose="false"
				@confirm="resultConfirmFn">
				<view>{{dialogMessage}}</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		defineComponent,
		onMounted,
		ref,
	} from "vue"
	import {
		onHide
	} from "@dcloudio/uni-app";
	import gameBox from "./gameBox.vue";
	import {
		showDialog
	} from "vant";
	components: {
		gameBox
	}

	let radio = ref(null)
	const gameContentBox = ref(null)
	let start = ref(false)
	let stop = ref(false)
	let diffLevel = ref(1)
	let diffPopup = ref(null)
	let resultDialog = ref(null)
	let dialogMessage = ref("")
	let dialogTitle = ref("")

	onHide(() => {
		//切换隐藏了 如果是运行状态得暂停
		if (start.value) {
			stop.value = true
		}
	})
	const hasRusult = (bool) => {
		if (bool) {
			//赢
			dialogMessage.value = "你赢了，congratulation"
			dialogTitle.value = "Winner"
		} else {
			//输
			dialogMessage.value = "fw你好像没了"
			dialogTitle.value = "Loser"
		}
		resultDialog.value.open()
	}
	const resultConfirmFn = () => {
		gameContentBox.value.initFn()
		resultDialog.value.close()
	}
	const confirmFn = () => {
		diffPopup.value.close()
	}
	const closeFn = () => {
		diffPopup.value.close()
	}
	const diffChange = () => {
		diffPopup.value.open()
	}
	const startFn = () => {
		start.value = true
	}
	const continueFn = () => {
		stop.value = false
	}
	const restartFn = ()=>{
		stop.value = false
		start.value = true
		gameContentBox.value.initFn()
	}
</script>

<style scoped>
	.filterBlur {
		filter: blur(0.15625rem);
		height: 100%;
		width: 100%;
		position: absolute;
	}

	.buttonBox {
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>